<template>
	<div class="body">
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
		<!-- <div class="hrader">
			<h2>盛大汽车礼品卡兑换中心</h2>
			<p>
				<span :class="{'on':choiceBt===true,'none':choiceBt===false}"  @click="changeStatus('1')">权益中心</span>
				<span :class="{'on':choiceBt===false,'none':choiceBt===true}"  @click="changeStatus('2')">兑换记录</span></p>
		</div> -->
		<div class="main">
			<h3><i></i><span>您已成功兑换以下权益</span></h3>
      <div v-if="nullNum" class="bg-nummNum">
      </div>
      <!-- <img v-if="nullNum" style="max-width:90%;display:block;margin:0 auto;" src="../../assets/img/null_bg_qy.jpg" /> -->
      <van-list v-if="!nullNum" v-model="loading" :finished="finished" @load="onLoad" >
        <van-panel v-for="(item, index) in orderdetail" :key="index" title="盛大汽车礼品卡" status="">
          <div style="padding: 10px 15px;">
            <ul>
              <li><label>权益总量</label><span class="blue">{{item.interests}}</span></li>
              <li><label>权益兑换时间</label><span class="fontsize">{{item.exchangeTime}}</span></li>
              <li><label>权益发放时间</label><span>{{item.createTime}}</span></li>
              <li><label>权益失效时间</label><span>{{item.expireTime}}</span></li>
              <li><label>兑换状态</label>
                <span v-if="item.exchangeStatus == 0" class="red">未兑换</span>
                <span v-if="item.exchangeStatus == 1" class="red">兑换成功</span>
              </li>
              <li><label>兑换方式</label>
                <span v-if="item.exchangeType == 0" class="fontsize">油卡充值卡</span>
                <span v-if="item.exchangeType == 1" class="fontsize">微信提现</span>
              </li>
              <li v-if="item.exchangeType == 1"><label>实际到账金额</label><span class="fontsize">{{item.discountMoney}}</span></li>
              <li v-if="item.exchangeType == 0"><label>包含充值卡数量</label><span class="fontsize">{{item.oliTotal}}张</span>
              <!-- <span>{{item.oliTotal | getTotal}}</span> -->
              </li>
            </ul>
          </div>
          <div slot="footer">
            <van-button v-if="InFo" size="small" @click="getInFo(item.id,item.exchangeType)">查看详情</van-button>
          </div>
        </van-panel>
      </van-list>
		</div>
  </van-pull-refresh>
	</div>
</template>
<script>
import { recordExchange } from "../../api/record.js";
import { RadioGroup, Radio } from "vant";
export default {
  data() {
    return {
      show: false,
      InFo: true,
      nullNum: true,
      // choiceBt: true,
      listParams: {
        pageNum: 1,
        pageSize: 10
      },
      orderdetail: "",
      radio: "1",
      isLoading: false,
      orderId: {
        id: ""
      },
      // 上拉加载
      loading: false,
      finished: false,
      total: 0
    };
  },
  created() {
    this.changeStatus();
  },
  filters: {
    getTotal(val) {
      let text = "";
      if (val) {
        text = val + "张";
      } else {
        text = "无";
      }
      return text;
    }
  },
  methods: {
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    changeStatus() {
      this.orderdetail = "";
      recordExchange(this.listParams).then(res => {
        if (res.status === 200) {
          if (res.data.data.length > 0) {
            this.nullNum = false;
            this.orderdetail = res.data.data;
            // 第一页数据小于10条后。不在触发上拉加载
            this.total = res.data.total;
          } else {
            this.nullNum = true;
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getInFo(id, exchangeType) {
      this.$router.push({
        path: `/index/details`,
        query: { id: id, exchangeType: exchangeType }
      });
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      Toast(item.name);
    },
    onRefresh() {
      this.finished = false;
      this.orderdetail = [];
      this.listParams.pageNum = 1;
      this.changeStatus();
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 1000);
    },
    onLoad() {
      // 异步更新数据
      if (this.orderdetail.length < this.total) {
        setTimeout(() => {
          ++this.listParams.pageNum;
          recordExchange(this.listParams).then(res => {
            if (res.status === 200) {
              if (res.data.data.length > 0) {
                for (let i = 0; i < res.data.data.length; i++) {
                  this.orderdetail.push(res.data.data[i]);
                }
                // 加载状态结束
                this.loading = false;
              }
            }
          });
          this.loading = false;
        }, 1000);
      } else {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.body {
  .main {
    padding: 12px;
    -webkit-overflow-scrolling: touch;
    .bg-nummNum {
      width: 100%;
      height: 380px;
      background: url(../../assets/img/null_bg.jpg) no-repeat center center;
      background-size: 300px auto;
    }
    h3 {
      padding: 12px 0;
      span {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #888888;
        font-weight: normal;
        margin-left: 20px;
      }
      i {
        background: #49b7e0;
        height: 20px;
        width: 3px;
        display: block;
        float: left;
      }
    }
    .van-cell-group {
      li {
        padding: 5px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        label {
          width: 110px;
          display: inline-block;
        }
      }
      button {
        border: none;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
.van-panel {
  margin-bottom: 20px;
}
.wx {
  padding: 10px 15px;
  span {
    font-size: 12px;
    color: #888888;
  }
  p {
    font-size: 14px;
    color: #333333;
  }
}
.blue {
  color: #49b7e0;
  span {
    color: #49b7e0 !important;
  }
  p {
    color: #49b7e0 !important;
  }
}
.red {
  color: #f80606;
}
.fontsize {
  color: #333;
}
</style>
